import Taro, {Component} from "@tarojs/taro";
import {View, Switch, Input, Form, Button} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {getRuntime,isPhone} from '../../utils/common'
import {IStoreProps} from '../../store/Stores'

import PickerArea from "../../components/PickerArea";

import '../mall/mall.less'

// 我的，收货地址-添加
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    allProvince:[],
    allCity:[],
    allDistract:[],
    provinceIndex: 0,
    cityIndex: 0,
    distractIndex: 0,
    area: null,
    addressInfo: null // 详细地址
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'添加收货地址' })
  }

  pickerArea(res) {
    this.setState({
      area: res.province.label+res.city.label+res.distract.label
    })
  }

  submit(e) {
    let { userStore } = this.props.stores
    let { area } = this.state
    let {receiver,receiverPhone,addressInfo} = e.detail.value
    if(!receiver){ getRuntime().showToast('收货人姓名不能为空~'); return false}
    if(!receiverPhone){ getRuntime().showToast('收货人手机号码不能为空~'); return false }
    if(!isPhone(receiverPhone)){ getRuntime().showToast('收货人手机号码格式不正确~'); return false }
    if(!area){ getRuntime().showToast('请选择省市区信息~'); return false }
    if(!addressInfo){ getRuntime().showToast('请填写详细地址信息~'); return false }
    userStore.saveUserAddress({
      form: {
        receiver,
        receiverPhone,
        receiverAddress: area+'@'+addressInfo,
        postalCode: '',
      },
      callback: () => {
        getRuntime().showToast('保存地址成功~')
        setTimeout(() =>{
          getRuntime().navigateBack()
        },2000)
      }
    })
  }
  render() {
    return (
      <View className='address-edit'>

      <Form onSubmit={this.submit.bind(this)}>
        <View className='from-wrap'>
          <View className='item-group'>
            <View className='input-group'>
              <View className='input-name'>收货人姓名</View>
              <Input className='from-input' name='receiver' placeholder='请填写收货人姓名' placeholderStyle={{'font-size': '26px'}} />
            </View>

            <View className='input-group'>
              <View className='input-name'>手机号码</View>
              <Input className='from-input' name={'receiverPhone'} type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写手机号码'/>
            </View>

            <View className='input-group '>
              <View className='input-name'>省/市/区</View>
              <PickerArea onPicketArea={this.pickerArea.bind(this)} />
            </View>

            <View className='input-group'>
              <View className='input-name'>详细地址</View>
              <Input className='from-input' name='addressInfo' placeholderClass='placeholder_class' placeholder={'请填写详细地址'}/>
            </View>

          </View>

          <View className='item-group'>
            <View className='input-group input-switch'>
              <View className='input-name'>设为默认地址</View>
              <Switch color='#00a0e9' />
            </View>
          </View>
        </View>
        <Button className='btn-line-submit' formType="submit">保存</Button>
      </Form>


      </View>
    )
  }
}

export default Personnel
